Android react-native初体验
经过查看各种资料, 终于对react-native有个初步的概念- 前端开发人员可以在此套框架下, 通过编写JSX代码, 实现app的开发(iOS, Android),无需写原生代码;- 使用react-native开发的应用,支持热更新,可直接在云端更新JS以更新应用,终端无需重新安装;官方Demo的Android安装:命令行界面下:$ npm install -g react-native-cli...
2024-01-10
React Native for Android 学习
前言Facebook 在2015.9.15发布了 React Native for Android，把 JavaScript 开发技术扩展到了移动Android平台。基于React的React Native 让前端开发者使用 JavaScript 和 React 编写应用，利用相同的核心代码就可以创建 基于Web，iOS 和 Android 平台的原生应用。在React Native for Android出来之后，本人花了些时间从环境搭...
2024-01-10
react-navigation android 导航标题居中
先贴下代码供参考：安卓默认导航的titile 是在左侧的，为了和iOS保持一致，需要添加 alignSelf:'center',这个 属性 但是会遇到title有点偏右的情况添加headerRight 这个属性，就OK 了，仅此手记，供各位参考参考：https://github.com/react-community/react-navigation/issues/544...
2024-01-10
android 架构之集成react native框架js混编APP
本篇文章主要总结一下现在APP当中使用的js、webView混编架构和技术。什么是 js 混编？js混编简单说就是使用JavaScript开发APP程序。android应用使用的是java，Kotlin 、c/c++ 为主的语言开发，ios使用的object-c 、 swift、c/c++ 为主语言开发，由于市场是基本都是android和ios手机，所以一般公司开发什么项目androi...
2024-01-10
React Native工程修改Android包名
默认初始化的React Native工程，生成Android工程的时候，包名默认是React Native工程的名字，跟一般Android工程com.company.xxx不一样。这时候就需要手动修改Android工程里面的包名信息：如下：首先修改React Native目录下的MainActivity.java的包名，具体路径是（android/app/src/main/java/com/PROJECT_NAME/MainActivity.java）修改 p...
2024-01-10
react native Modal 制作背景变暗
/** * Create by bamboo on 2018-05-07 * Modal 例子 */import React, { Component } from 'react';import { StyleSheet, Text, Modal, View, TouchableOpacity, T...
2024-01-10
React Native之倒计时组件的实现(ios android)
一,需求分析 1,app需实现类似于淘宝的活动倒计时,并在倒计时结束时,活动也结束。 2,实现订单倒计时,并在倒计时结束时,订单关闭交易。 3,实现获取验证码倒计时。二,技术实现 2.1,活动倒计时与订单倒计时的实现,源码如下： 1 componentDidMount() { 2 this.interval = setInterval(() => ...
2024-01-10
Android React-Native通信数据模型分析
无论是计算机领域还是日常生活中，我们所言的通信，其核心都是数据信息的交换，而数据模型的优劣对通信效率有着决定性的作用。在React-Native项目中，Javascript语言与Native两种语言（Java或OC等）间存在着大量的数据交换，也就是所谓的通信。众所周知，移动APP对性能的要求无比苛刻，如果通信数据...
2024-01-10
vue react angular比较
VUEVue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够...
2024-01-10
React Native的android API -ReactAndroid开源项目
ReactAndroid是React Native的android开源项目；React Native源码：https://github.com/facebook/react-native/tree/master/ReactAndroidReact Native的Android API不同版本的React Native Android API和React Native Android源码；项目目录的node_modules\react-native\android\com\facebook\react\rea...
2024-01-10
react-ant 修改antDesign 样式
需求:想修改antDesign样式发现修改不了解决: 一定要在样式外面加上:global写全局样式 :js: <Form onSubmit={this.handleSubmit} className="account-form"> <Form.Item label="邮箱"> <Input type="email"/> </Form.Item> <Form.Item label="密码"> <Input typ...
2024-01-10
react middleware详解
自：https://www.jianshu.com/p/f4166120489b?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation为什么dispatch需要middleware？middle.png上图表达的是 redux 中一个简单的同步数据流动的场景，点击 button 后，在回调中 dispatch 一个 action，reducer 收到 action 后，更新 state 并...
2024-01-10
用 React 整合 LogEntries JavaScript 库
【编者按】本文作者为 David Posin，主要介绍 React 与 LogEntries 间的相互操作。本文系国内 ITOM 管理平台 OneAPM 编译呈现。众所周知，React.js已经被证实是众多JavaScript架构中的有力竞争者。按理说，它已经成为web开发人员应当考虑的，在当前及未来项目中使用的少数项目库之一。而了解它如何与技术栈中...
2024-01-10
使用WebStorm开发React Native调试Android项目
React-Native自带的打印log的命令android : react-native log-androidios : react-native log-iosandroid studio调试习惯了,然后在webstorm调试react-native找到了一个调试插件:react-native-console 可以直接从webstorm的设置中添加插件File>>Settings>>Plugins>>搜索React Native Console 安装之后重启webstorm就ok了控制台效果...
2024-01-10
Why React Is Favored by Front-End Specialists
In this section, we will discuss some of the features that make React a superior choice for front-end developers. Have a look:The Virtual DOM: As discussed above, React.js brought in the helpful Virtual DOM - a virtual browser infinite times friendlier tha...
2024-01-10
【React】antd Form表单的initialValue问题
在initial中是有初始值的，但是却不显示初始值，请大佬解答一下这个问题 const formItem = [{ type: 3, label: '柜子编号', name: 'ID', width: '150px', required: true },{ type: 1, label: '柜子名称', name: 'name', width: '150px', },{ type: 1, label: '所属仓库', name: 'wareHouse', width: '150px' ...
2024-01-10
Windows下配置React-native环境问题总结
从最近移动端市场的需求来看，Android原生开发已经危机重重，混合开发的大趋势已经越来越难以忽视了。不迎合趋势注定会被时代淘汰，因此选择了有FaceBook技术背书的Reactive Native作为混合开发的切入技术。这篇博客是开篇，后面会有系列文章记录学习Reactive Native的成长，希望能帮助到后来的人，尤其...
2024-01-10
React Native移动开发实战-5-Android平台的调试技巧
Android平台的调试和其他平台的调试也很类似，例如：在Android Studio打开的工程中，打开源码MainActivity.java，然后，将鼠标移至代码编辑区的左侧后，单击鼠标即可添加断点，接着，选择菜单Debug -> Debug ‘app’，即可调试Android应用，效果如图5.12所示。图5.12 Android原生项目断点调试 如果要调试...
2024-01-10
ReactNative 本地文件访问 react-native-fs Android配置所遇到的坑
事件背景：react-native-fs配置完毕之后在Android无法使用，无法编译通过；安装：npm install react-native-fs --save如果 RN版本<0.57或者Gradle < 3：需要安装：npm install [email protected]–save本人的RN版本0.44.3所以遇到了坑，官方npm上的配置也一步步配置了，发现在ios没有问题，但是在android上不能运行，不能编译通...
2024-01-10
React Native未来导航者：react-navigation 使用详解
该库包含三类组件：（1）StackNavigator：用来跳转页面和传递参数（2）TabNavigator：类似底部导航栏，用来在同一屏幕下切换不同界面（3）DrawerNavigator：侧滑菜单导航栏，用于轻松设置带抽屉导航的屏幕react-navigation使用 具体内容大致分为如下：（1）react-navigation库属性介绍（2）StackNavigator、TabNavig...
2024-01-10
分享我的 React Native 项目搭建探索之旅 --- Android版
我的 React Native 项目搭建探索首先，官网给了我们大概的指引https://reactnative.cn/docs/getting-started照着它做，方向总没错， but , 对于之前没接触过的人来说，照着做往往搭建不起来， 因为一些配置官网没有介绍到。。然后就会陷入error 无法自拔。。所以，那补充下官网没涉及的Android Studio 配置1，sdk ...
2024-01-10
使用react-navigation提示undefind is not a function
在学习react-natrive的时候，看到导航跳转一章，遂试了一下demo:但是呢，在安卓模拟器上却报错了：找了许多方法，包括降低版本都不行，后来修改了一下导出就可以了：...
2024-01-10
react typescript FunctionComponent antd crud
这个界面跟之前VUE做的一样。并无任何不同之处，只是用react重复实现了一遍。import React, { useState, useEffect } from 'react';import { Row, Col, Table, Form, Cascader, Input, Button, Modal, message } from 'antd';import { FormComponentProps } from 'antd/lib/form';import http from '../../serv...
2024-01-10
react-native开发异常处理——react-native run-android命令报错
学习交流：https://gitee.com/potato512/Learn_ReactNativereact-native学习交流QQ群：806870562在终端使用命令react-native run-android报错，如下图所示：其中说到No connected devices!，我便猜测是不是需要先打开android模拟器，于是就先启动android模拟器，再接着执行命令react-native run-android果然运行成功。...
2024-01-10
React Native ref高级用法&&setNativeProps使用
ref属性不只是string ref属性不仅接受string类型的参数，而且它还接受一个function作为callback。这一特性让开发者对ref的使用更加灵活。render() { return <TextInput ref={(c) => this._input = c} />; }, componentDidMount() { this._input.focus(); },render(){ return <View ref={ (e) => this._view = e ...
2024-01-10
